<template>
	<view class="u-flex align-center" @tap="handChange">
		<view class="checkbox" :class="{ active: state, checkboxLg: size == 'lg' }"></view>
		<slot>
			<text class="info" v-if="text">{{ text }}</text>
		</slot>
	</view>
</template>

<script>
export default {
	name: 'checkbox',
	props: {
		state: {
			type: [Boolean, Number],
			default: false
		},
		index: {
			type: [Number],
			default: 0
		},
		text: {
			type: String,
			default: ''
		},
		size: {
			type: String,
			default: 'default'
		}
	},
	data() {
		return {};
	},
	methods: {
		handChange() {
			let { state, index } = this;
			this.$emit('handChange', {
				state,
				index
			});
		}
	}
};
</script>

<style lang="less">
.checkbox {
	width: 38upx;
	height: 38upx;
	border: 1px solid rgba(#000, 0.3);
	border-radius: 100%;
	&.active {
		background: var(--nav-bg);
		border: none;
		background: url(/static/check.png) no-repeat;
		background-size: 100% auto;
	}
	&.checkboxLg {
		width: 48upx;
		height: 48upx;
	}
}
.info {
	color: #48484a;
	font-size: 26upx;
	margin-left: 12upx;
}
</style>
